@import "~/assets/css/public/color.scss";
.page-index{
    .banner-container {
      display:table;table-layout:fixed;width:100%;
      .left-banner {
        width: 230px;
      }
      .right-banner, .left-banner {
        display: table-cell;
      }
    }
    .m-menu {
      width: 230px;
      height: 475px;
      box-sizing: border-box;
      margin-top: -50px;
      color: #646464;
      position: relative;
      border: 1px solid #E5E5E5;
      background: #fff;
      dt {
        height: 50px;
        padding-top: 15px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: 700;
        margin-left: 15px;
      }

      dd {
        position: relative;
        box-sizing: border-box;
        padding: 2px 12px;
        height: 26px;
        cursor: pointer;

        &:hover {
          background: rgba(255,150,0,0.08);
          font-weight: bold;
          &>i {
            opacity: 1;
          }
          .arrow {
            border-bottom: 1px solid #646464;
            border-right: 1px solid #646464;
          }
        }
      }

      .nav {
        dd>i {
          font-family: 'meituan';
          font-size: 14px;
          font-style: normal;
          margin-right: 11px;

          &:before {
            width: 14px;
            height: 14px;
            display: inline-block;
          }
        }

        .food {
          &:before {
            content: '\e60e';
            color:#FF8200;
          }
        }
        
        .takeout {
          &:before {
            content:'\e60a';
            color:#FFB500;
          }
        }

        .hotel {
          &:before {
            content:'\e616';
            color:#9B5E3E;
          }
        }

        .zhenguo {
          &:before {
            content:'\e60c';color:#FFB500;
          }
        }

        .maoyan {
          &:before {
            content:'\e612';color:#FF3D00;
          }
        }
        .ktv {
          &:before {
            content:'\e607';color:#00BF96;
          }
        }

        .beauty {
          &:before {
            content:'\e60f';color:#FF4081;
          }
        }

        .married {
          &:before {
            content:'\e609';color:#FF4081;
          }
        }

        .child {
          &:before {
            content:'\e608';color:#FF4081;
          }
        }

        .sport {
          &:before {
            content:'\e611';color:#03A9F4;
          }
        }

        .decorate {
          &:before {
            content:'\e60b';color:#00BF96;
          }
        }

        .education {
          &:before {
            content:'\e610';color:#00BF96;
          }
        }

        .medical {
          &:before {
            content:'\e60d';color:#03A9F4;
          }
        }

        .bar {
          &:before {
            content:'\e606';color:#00BF96;
          }
        }

        .waimai {
          &:before {
            content:'\e60a';color:#FFB500;
          }
        }

        .plane {
          &:before {
            content:'\e615';color:#03A9F4;
          }
        }

        .life {
          &:before {
            content:'\e614';color:#00BF96;
          }
        }

        .trave {
          &:before {
            content:'\e613';color:#03A9F4;
          }
        }

        .arrow {
          width: 4px;
          height: 4px;
          border-bottom: 1px solid #BFBFBF;
          border-right: 1px solid #BFBFBF;
          transform: rotate(-45deg);
          display: block;
          position: absolute;
          right: 13px;
          top: 0;
          bottom: 0;
          margin: auto;
          
        }
      }

      .detail {
        padding: 0 30px;
        position: absolute;
        left: 230px;
        bottom: 0;
        width: 400px;
        height: 416px;
        background: #fff;
        z-index: 9999;

        h4 {
          margin-top: 24px;
          height: 22px;
          line-height: 22px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e5e5e5;
        }

        span {
          color: #999;
          font-size: 12px;
          line-height: 15px;
          display: inline-block;
          margin-right: 16px;
          margin-top: 10px;
          cursor: pointer;

          &:hover {
            color: $orange;
          }
        }
      }
    }
    .carousel {
      height: 240px;
      margin: 10px;
      .el-carousel__button {
        width: 10px;
      }
      .el-carousel__arrow {
        background: #333;
        opacity: 0.7;
      }
      img {
        height: 240px;
      }
    }
}